<template>
  <div class="violation">
    <div class="header">
      <div><span style="color: darkgrey">首页/个人中心/</span>企业信息</div>
    </div>
    <div class="subject">
      <div class="right">
        <div
          class="menu-item"
          :class="{ active: selectedMenu === 'company' }"
          @click="selectMenu('company')"
        >
          <i class="icon grid"></i>
          <span>企业信息</span>
        </div>
        <div
          class="menu-item"
          :class="{ active: selectedMenu === 'participate' }"
          @click="selectMenu('participate')"
        >
          <i class="icon doc"></i>
          <span>参与投标</span>
        </div>
        <div
          class="menu-item"
          :class="{ active: selectedMenu === 'mybid' }"
          @click="selectMenu('mybid')"
        >
          <i class="icon circle"></i>
          <span>我的投标</span>
        </div>
      </div>
      <div class="left">
        <div class="form-item">
          <span class="label">企业名称:</span>
          <span class="value">{{ companyInfo.name }}</span>
        </div>
        <div class="form-item">
          <span class="label">统一社会信用代码:</span>
          <span class="value">{{ companyInfo.creditCode }}</span>
        </div>
        <div class="form-item">
          <span class="label">公司注册地址:</span>
          <span class="value">{{ companyInfo.address }}</span>
        </div>
        <div class="form-item">
          <span class="label">机构类型:</span>
          <span class="value">{{ companyInfo.orgType }}</span>
        </div>
        <div class="form-item">
          <span class="label">企业性质:</span>
          <span class="value">{{ companyInfo.natureType }}</span>
        </div>
        <div class="form-item">
          <span class="label">成立日期:</span>
          <span class="value">{{ companyInfo.establishDate }}</span>
        </div>
        <div class="form-item">
          <span class="label">法人/负责人:</span>
          <span class="value">{{ companyInfo.legalPerson }}</span>
        </div>
        <div class="form-item">
          <span class="label">法人/负责人身份证:</span>
          <span class="value">{{ companyInfo.legalPersonId }}</span>
        </div>
        <div class="form-item">
          <span class="label">法人/负责人身份证扫描件:</span>
          <span class="value"><a href="#">查看图片</a></span>
        </div>
        <div class="form-item">
          <span class="label">单位联系地址:</span>
          <span class="value">{{ companyInfo.contactAddress }}</span>
        </div>
        <div class="form-item">
          <span class="label">经营范围:</span>
          <span class="value">{{ companyInfo.businessScope }}</span>
        </div>
        <div class="form-item">
          <span class="label">公司简介:</span>
          <span class="value">{{ companyInfo.introduction }}</span>
        </div>
        <div class="form-item">
          <span class="label">营业执照有效期:</span>
          <span class="value">{{ companyInfo.licenseValidity }}</span>
        </div>
        <div class="form-item">
          <span class="label">营业执照扫描件:</span>
          <span class="value"><a href="#">查看图片</a></span>
        </div>
        <div class="form-item">
          <span class="label">开户行:</span>
          <span class="value">{{ companyInfo.bank }}</span>
        </div>
        <div class="form-item">
          <span class="label">银行账号:</span>
          <span class="value">{{ companyInfo.bankAccount }}</span>
        </div>
        <div class="form-item">
          <span class="label">开户行地址:</span>
          <span class="value">{{ companyInfo.bankAddress }}</span>
        </div>
        <div class="form-item">
          <span class="label">单位注册电话:</span>
          <span class="value">{{ companyInfo.registerPhone }}</span>
        </div>
        <div class="form-item">
          <span class="label">单位注册地址:</span>
          <span class="value">{{ companyInfo.registerAddress }}</span>
        </div>
        <div class="form-item">
          <span class="label">注册资本(万元):</span>
          <span class="value">{{ companyInfo.registeredCapital }}</span>
        </div>
        <div class="form-item">
          <span class="label">实缴资本:</span>
          <span class="value">{{ companyInfo.paidCapital }}</span>
        </div>
        <div class="form-item">
          <span class="label">开户许可证/基本存款账户信息证:</span>
          <span class="value"><a href="#">查看图片</a></span>
        </div>
        <div class="edit-button">
          修改
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedMenu: "company",
      companyInfo: {
        name: "大连素食有限公司",
        creditCode: "201200043245689567",
        address: "辽宁省大连市金普新区和平路56号",
        orgType: "企业机构",
        natureType: "私营企业",
        establishDate: "2021年-05月13日",
        legalPerson: "李华",
        legalPersonId: "210282198706235543",
        contactAddress: "辽宁省大连市金普新区和平路56号",
        businessScope: "饮食",
        introduction: "大连素食有限公司是一家致力于研究素食美味的公司",
        licenseValidity: "2021/5/13 -2028/5/13",
        bank: "大连银行",
        bankAccount: "63299427971907320931709",
        bankAddress: "辽宁省大连市金普新区农贸街65号",
        registerPhone: "8657-4321",
        registerAddress: "辽宁省大连市金普新区和平路56号",
        registeredCapital: "200.00",
        paidCapital: "100.00万元"
      }
    };
  },
  methods: {
    selectMenu(menu) {
      this.selectedMenu = menu;
    },
  },
};
</script>

<style scoped>
.violation {
  width: 90vw;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 20px;
  max-width: 1200px;
}

.header {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subject {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.right {
  width: 20%;
  height: 100%;
  border-radius: 10px;
  background-color: rgba(23, 194, 170, 1);
  padding: 20px 0;
}

.left {
  position: relative;
  width: 78%;
  height: 100%;
  border-radius: 9px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  background-color: white;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  color: white;
  cursor: pointer;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  color: black;
}

.icon.grid {
  background-image: url("../assets/images/企业信息/u721.png");
}

.icon.doc {
  background-image: url("../assets/images/企业信息/u721.png");
}

.icon.circle {
  background-image: url("../assets/images/企业信息/u721.png");
}

.menu-item.active {
  background-color: white;
  color: rgba(23, 194, 170, 1);
  width: 80%;
  margin: 0 auto;
  border-radius: 5px;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label {
  color: #333;
  white-space: nowrap;
  min-width: 120px;
  text-align: right;
  font-weight: bold;
}

.value {
  color: #666;
  flex: 1;
  font-size: 14px;
}

/* 查看图片链接样�� */
.value a {
  color: #17C2AA;
  text-decoration: none;
}

.value a:hover {
  text-decoration: underline;
}

/* Update edit button styles */
.edit-button {
  position: absolute;
  bottom: 30px;
  right: 30px;
  padding: 8px 20px;
  background-color: #17C2AA;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.edit-button:hover {
  background-color: #15b19c;
}
</style>
